<template>
  <div>
    <el-select v-model="selection" @change="change" :multiple="multiple" placeholder="请选择">
      <el-option
        v-for="(item,index) in data"
        :key="index"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    name: "select-assignee",
    model: {
      prop: 'value', // 这个会是model传入绑定prop的value
      event: 'change' // 触发change事件，修改model
    },
    props: {
      data: {
        type: Array,
        default: () => []
      },
      value: {
        type: Array,
        default: () => []
      },
      multiple: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      value: {
        deep: true,
        immediate: true,
        handler(val) {
          // 传递的是数组， 单选是字符串
          if (!this.multiple) {
            if (val.length>0) {
              this.selection = val[0]
            } else {
              this.selection = ''
            }
          } else {
            this.selection = val
          }
        }
      },
      data: {
        deep: true,
        immediate: true,
        handler(val) {
          if(val.length == 1){
            this.selection = [val[0].id]
            this.$parent.$parent.form.selectAssigneeList = [val[0].id]
          }else {
            this.selection = ''
          }
        }
      }
    },
    data() {
      return {
        userList: [],
        selection: null
      }
    },
    methods: {
      clearChoose(){
        this.$set(this,'selection',[])
      },
      change(val) {
        if (!this.multiple) {
          this.$emit('change', [val])
        } else {
          this.$emit('change', val)
        }
      }
    }
  }
</script>

<style scoped>

</style>
